This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Listing page

Version: 0.135.0

Overview

Merchants use Listing pages to scan, sort, compare and take action on items of a specific object type, such as products, or record type, such as orders.



Examples

Check out examples of Listing pages in tune with our design system.



FAQ


When should I use a Listing page on my project?

Use a Listing page when you need to organize and display data, so that merchants can scan, sort, filter and compare them, and also navigate to a specific piece of data to complete a task. The type of data to be listed can be objects, such as products and promotions, or records, such as orders and transactions.


What are the basic features of a Listing page?

A listing page usually includes:

  • Filters with which you can create different ways of displaying data, according to merchants’ needs and priorities.
  • A Search bar where merchants can input information they wish to find in the list.
  • A Menu with default actions for each item, like View Details, Edit, Copy URL and Delete, which are basic actions that merchants can take from a listing item and can be adjusted according the the context you're working with.
  • Bulk Actions, for merchants to edit or apply information to multiple list items at the same time.
  • Buttons to Import and Export data from the list.
  • Pagination so that merchants can navigate in the list.

Page

Merchants identify where they are, perform main actions and view content.

DataView

Merchants view a list of objects with search, filters and pagination.

Table

Merchants view objects in rows that they can select and take actions.